<div id="header">
    <el-menu class="el-menu-demo" mode="horizontal">
        <!-- 左侧 -->
        <el-menu-item index="1" @click="toIndexHtml">主页</el-menu-item>
        <el-menu-item index="2" @click="toPost">空间</el-menu-item>
        <el-menu-item index="3" disabled>333</el-menu-item>

        <!-- 右侧 -->
        <el-menu-item index="4" @click="openUserInfo" style="float: right;">
            {{isLogin ? userInfo.userNickname : "点此登录"}}
        </el-menu-item>
        
        <!-- 右侧用户抽屉部分 -->
        <el-drawer title="" :size="drawerWidth" :modal-append-to-body="false" :visible.sync="drawer"
            :with-header="false">
            <div class="user-drawer">
                <!-- 用户的基本信息 -->
                <div class="user-info-bg x-box" :style="{backgroundImage: 'url(' + userInfo.userAvatarURL + ')'}">
                    <div class="user-info-content y-box">
                        <div class="user-avatar">
                            <img class="border-clear border-circel" :src="userInfo.userAvatarURL">
                        </div>
                        <div class="user-nickname border-clear">
                            {{userInfo.userNickname}}
                        </div>
                    </div>
                </div>
                <!-- 功能选项按钮部分 -->
                <div class="option">
                    <div class="option-content y-box">
                        <div class="option-button" @click="toUserHome">
                            <img class="icon" src="/img/buttonIcon/首页.png" />
                            <div class="text">我的首页</div>
                        </div>
                        <div class="option-button">
                            <img class="icon" src="/img/buttonIcon/设置.png" />
                            <div class="text">设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        </div>
                        <div class="option-button option-button-danger" @click="logoutCurrent">
                            <img class="icon" src="/img/buttonIcon/注销.png" />
                            <div class="text">登出当前设备</div>
                        </div>
                        <div class="option-button option-button-danger" @click="logoutAll">
                            <img class="icon" src="/img/buttonIcon/注销.png" />
                            <div class="text">登出所有设备</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </el-menu>

</div>
<!-- 接口地址全局变量 -->
<script src="/js/common/jieKouAddress.js"></script>
<!-- 全局函数 -->
<script src="/js/common/commonMethod.js"></script>
<script>
    "use strict";
    var vueHeader = new Vue({
        el: '#header',
        data: {
            // activeIndex: '1', // 设置活动的导航选项
            // 当前屏幕宽度
            screenWidth: 992,
            screenHeight: 0,
            // 用户的信息
            userInfo: {},
            // 用户是否登录，false未登录，true登录
            isLogin: false,
            // 控制抽屉是否打开，false不打开，true打开
            drawer: false,
            // 抽屉宽度
            drawerWidth: "20%"
        },
        //钩子函数，VUE对象初始化完成后自动执行
        // 这一个vue对象要比页面的vue对象先加载，所以在这个vue中可以获取页面的vue
        created() {
            console.log("初始化headerVUE");
            if (!(typeof eval(vue.vueHeaderCreated) === "undefined")) {
                // 将当vueHeader对象传入vue对象
                vue.vueHeaderCreated(this);
            }
            getUserInfoFromServer(this, (result) => {
                this.isLogin = true;
            });
        },
        mounted() {
            const that = this;
            console.log("当前屏幕宽度：" + document.body.clientWidth);
            console.log("当前屏幕的高度：" + document.body.clientHeight);
            that.screenWidth = document.body.clientWidth;
            that.screenHeight = document.body.clientHeight;

            that.resetDrawerWidth(); // 设置抽屉宽度

            // 调用vue的一个自定义函数
            if (!(typeof eval(vue.vueHeaderOnresize) === "undefined")) {
                // 将当前窗口的宽高传入vue对象
                vue.vueHeaderOnresize(that.screenWidth, that.screenHeight);
            }
            // 窗口的变化事件
            window.onresize = () => {
                return (() => {
                    that.screenWidth = document.body.clientWidth;
                    that.screenHeight = document.body.clientHeight;

                    that.resetDrawerWidth(); // 设置抽屉宽度

                    // 调用vue的一个自定义函数
                    if (!(typeof eval(vue.vueHeaderOnresize) === "undefined")) {
                        // 将当前窗口的宽高传入vue对象
                        vue.vueHeaderOnresize(that.screenWidth, that.screenHeight);
                    }
                })()
            }
        },
        methods: {
            toIndexHtml() {
                location.href = "/index.html";
            },
            // 打开抽屉，如果用户未登录则跳转到登录界面
            openUserInfo() {
                if (this.isLogin) {
                    console.log("打开抽屉");
                    this.drawer = true;
                } else {
                    location.href = "/login.html";
                }
            },
            // 根据窗口大小调整抽屉宽度
            resetDrawerWidth() {
                if (this.screenWidth < 992) {
                    this.drawerWidth = "80%";
                } else if (this.screenWidth < 1200) {
                    this.drawerWidth = "40%";
                } else {
                    this.drawerWidth = "30%";
                }
            },
            logoutCurrent() {
                this.logout(addressUCUserLogoutCurrent);
            },
            logoutAll() {
                this.logout(addressUCUserLogoutAll);
            },
            // 退出登录
            logout(address) {
                console.log("退出登录");
                axios.get(address, {}).then((result) => {
                    if (result.data.flag) {
                        this.$notify({
                            title: "成功",
                            message: result.data.message,
                            type: "success"
                        });
                        // 跳转到登录界面
                        setTimeout(() => {
                            location.href = "/login.html";
                        }, "1000");
                    } else {
                        this.$notify.error({
                            title: "错误",
                            message: result.data.message
                        });
                    }
                });
            },
            // 跳转到用户首页
            toUserHome() {
                location.href = "/userHome.html";
            },
            // 跳转到奶盒空间页面
            toPost() {
                location.href = "/post.html";
            }
        }
    });
</script>